<template>
  <div class="banner">
   <Header>
				<div class="title"><span class="title-span">登录</span></div>
				<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
		</Header>
  <!-- </div> -->
  
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    :rules="rules.username"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
   :rules="rules.password"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" class="footer" native-type="submit">提交</van-button>
    <router-link to="/reg" class="link">注册</router-link>
  </div>
</van-form>
  </div>
</template>

<script>
import {NavBar,Form, Field,Icon,Toast } from 'vant';
import  rules from '@/common/validator'
import {login} from '../api/user'


console.log(NavBar)
console.log(Form);
console.log(Field);
console.log(Icon);
console.log(Toast)



export default {
  name:"reg",
  data(){
    return {
      username:"",
      password:"",
      rules
    }
  },
  components:{
    [NavBar.name]:NavBar,
    [Form.name]:Form,
    [Field.name]:Field,
    [Icon.name]:Icon,
    [Toast.name]:Toast
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values);
     
      login(values).then(res=>{
        console.log(res)

        if(res.code==0){

          let {token,tokenExpired} = res;


          localStorage.setItem('tokenExpired',tokenExpired);
          localStorage.setItem('token',token);  //  通行证  验证我们身份的   过期时间  
        // this.$store.commit('change',{key:'token',value:token})
             this.$store.dispatch('getuserInfo',token)



          setTimeout(v=>{
                 this.$router.back()
          },500)


        
        }else{

            this.$toast(res.msg||'登录失败');

        }



      })

    },
    yanzheng(){

    }
    }
    
}
</script>

<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 20px;
  top: -25px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 170px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
// .countent {
//   background-color: green;
// }
.footer {
  background-color: green;
}
.link {
  color: #999;
  float: right;
  margin-top: 15px;
}

</style>